<template>
  <div class="nav-floor">
    <div class="tab-item" @click="home">
      <span class="item-image">
        <img src="../assets/img/card.png">
      </span>
      <span class="item-text">推荐</span>
    </div>
    <div class="tab-item">
      <span class="item-image">
        <img src="../assets/img/card.png">
      </span>
      <span class="item-text">分类</span>
    </div>
    <div class="tab-item">
      <span class="item-image">
        <img src="../assets/img/card.png">
      </span>
      <span class="item-text">购物车</span>
    </div>
    <div class="tab-item" @click="user">
      <span class="item-image">
        <img src="../assets/img/card.png">
      </span>
      <span class="item-text">我的</span>
    </div>
  </div>
</template>

<script>

import { ajax, userRedirect } from 'assets/js/Lib'
let redirect = userRedirect.getRedirect()

export default {
  data() {
    return {

    }
  },
  components: {

  },
  props: {

  },
  //实例初始化最之前，无法获取到data里的数据
  beforeCreate() {


  },
  //在挂载开始之前被调用
  beforeMount() {


  },
  //已成功挂载，相当ready()
  mounted() {

  },
  //相关操作事件
  methods: {
    home: function () {
      redirect = {
        "id": 'home',
        "url": 'home.html'
      }
      userRedirect.setRedirect(redirect);
      window.toHome();
    },
    user: function () {
      redirect = {
        "id": 'user',
        "url": 'user.html'
      }
      userRedirect.setRedirect(redirect);
      window.toUser();
    }
  }
}
</script>

<style lang="less">
.nav-floor {
  background: #fff;
  width: 100%;
  position: fixed;
  height: 54px;
  z-index: 99;
  bottom: 0;
  left: 0;
  box-shadow: 0 0 6px #ccc;
  .tab-item {
    width: 24.99%;
    height: inherit;
    float: left;
    padding: 13px;
    img {
      width: 100%;
      height: 100%;
    }
    .item-image {
      width: 21px;
      height: 18px;
      margin: 0 auto;
      margin-bottom: 4px;
      position: relative;
      display: block;
    }
    .item-text {
      display: block;
      font-size: 11px;
      line-height: 11px;
      color: #232326;
      text-align: center;
      margin-bottom: 4px;
    }
  }
}
</style>
